<template>
    <div class="right2">
        <div class="small-title">
            <span>秸秆处理</span>
        </div>
        <div  class="crop-rank" ref="rightTwoEcharts"></div>
    </div>
</template>

<script setup>
import * as echarts from "echarts";
// import 'echarts-gl';
import { onMounted ,ref} from "vue";

   const rightTwoEcharts=ref();
   onMounted(() =>{
    const mycharts=echarts.init(rightTwoEcharts.value);
    const option={
        title: {
  },
  tooltip: {
    trigger: 'axis',
    // axisPointer: {
    //   type: 'shadow'
    // }
  },
  legend: {
    show:false
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
 
  },
  xAxis: {
    show:false,
    type: 'value',
    boundaryGap: [0, 0.01],
    min: 0,
           max: 900000,
          interval: 900000,
  },
  yAxis: {

    name: '含量（毫克/公斤）',
    nameTextStyle: {
        color: 'white'
      },
    type: 'category',
    data: [         '水田深翻还田',
                    '水稻秸秆离田',
                    '水稻秸秆未离田',
                    '旱田碎混还田',
                    '玉米秸秆离田',
                    '玉米秸秆未离田',],
    axisLabel: {
        color: 'white'
      },
      axisTick:{
            show: false //不显示坐标轴刻度线
        },
        axisLine: {
            show: false, //不显示坐标轴线
        },
  },

  series: [
    {
      type: 'bar',
      backgroundStyle: { color: 'rgba(82, 168, 255, 0.1)', borderRadius: [0, 8, 8, 0] },
      data: [ 409280, 409280, 509280, 609280, 709280, 809280],
      label: {
          show: true,
          precision: 1,
          position: 'right',
          valueAnimation: true,
          fontFamily: 'monospace'
        },
      itemStyle: {
        color: 'white',
		normal: {
            borderRadius: [0, 8, 8, 0],
                        color: function(params) {
                            // 定义一个颜色集合
                            let colorList = [
                                '#52A8FF',
                                '#00B389',
                                '#FFA940',
                                '#FF5A57',
                                '#29EFC4',
                                '#F8AEA4',
                            ];
                            // 对每个bar显示一种颜色
                            return colorList[params.dataIndex];
                        },
                    },
                        
    }}
  ]}
        // 使用刚指定的配置项和数据显示图表。
        mycharts.setOption(option);
    
   })

</script>
<style lang="scss" scoped>
.right2 {
  width: 25%;
  height: calc(100% / 3 - 57px);
  background-image: url("@/assets/img/backg1.png");
  background-size: 100% 100%;
  position: fixed;
  top: calc(100% / 3 + 61px);
  float: left;
  .small-title {
      left: 5%;
      position: relative;
        span {
        color: rgb(157, 211, 236);
        position: relative;

        }
}
.crop-rank {
  margin-top: -10px;
  left: 0px;
width: 100%;
height: 100%;
}
}

</style>